<template>
    <el-dialog title="上传出口信息" width="60%" :visible.sync="dialogVisible" :before-close="handleClose">
        <el-form v-if="dialogVisible" v-loading="pageLoading" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" label-position="top">
            <c-form-template lable="基本信息">
                <el-col :span="8">
                    <el-form-item label="海运提单号" prop="seaBillNo">
                        <div class="flex-y-center">
                            <el-input v-model="ruleForm.seaBillNo" placeholder="请输入海运提单号">
                            </el-input>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名" prop="shipName">
                        <div class="flex-y-center">
                            <el-input v-model="ruleForm.shipName" placeholder="请输入海运提单号">
                            </el-input>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次" prop="shipNo">
                        <div class="flex-y-center">
                            <el-input v-model="ruleForm.shipNo" placeholder="请输入航次">
                            </el-input>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="出口日期" prop="exportDate">
                        <div class="flex-y-center">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.exportDate" style="width: 100%;"></el-date-picker>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="预计到港日期" prop="estimateArrivalDate">
                        <div class="flex-y-center">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.estimateArrivalDate" style="width: 100%;"></el-date-picker>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="海运提单" prop="oceanBillLadingFile">
                        <c-upload @change="$refs.ruleForm.validateField('oceanBillLadingFile')" v-model="ruleForm.oceanBillLadingFile" listType="picture-card" :limit="1" :accept="['.jpg','.png','pdf']" :tip="['只能上传jpg/png/pdf文件，且不超过500kb']" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="箱单" prop="containerFile">
                        <c-upload @change="$refs.ruleForm.validateField('containerFile')" v-model="ruleForm.containerFile" listType="picture-card" :limit="1" :accept="['.jpg','.png','pdf']" :tip="['只能上传jpg/png/pdf文件，且不超过500kb']" />
                    </el-form-item>
                </el-col>
            </c-form-template>
            <c-form-template lable="装箱信息" :actionText=' containerList.length >= vins.length ? "" : "添加集装箱" ' @handleAction="addContainer">
                <div v-for="(item,index) in containerList" :key="index" class="containerItem">
                    <el-col :span="24" class="title"><span @click="delItem(index)">删除</span>集装箱{{index+1}}</el-col>
                    <el-col :span="6" v-for="p in item" :key="p.key">
                        <el-form-item :label="p.name" v-if='p.type == "input" '>
                            <div class="flex-y-center">
                                <el-input v-model="ruleForm.transportContainerList[index][p.key]" :placeholder='"请输入"+p.name'>
                                </el-input>
                            </div>
                        </el-form-item>
                        <el-form-item :label="p.name" v-if='p.type == "select" && p.key == "size"'>
                            <div class="flex-y-center">
                                <el-select v-model="ruleForm.transportContainerList[index][p.key]" :placeholder='"请选择"+p.name'>
                                    <el-option v-for="op in containerSizes" :key="op.value" :label="op.label" :value="op.value"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item :label="p.name" v-if='p.type == "select" && p.key == "vinList"'>
                            <div class="flex-y-center">
                                <el-select v-model="ruleForm.transportContainerList[index][p.key]" multiple :placeholder='"请选择"+p.name'>
                                    <el-option v-for="op in vins" :key="op.value" :label="op.label" :value="op.value"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item :label="p.name" v-if='p.type == "file"'>
                            <div class="flex-y-center">
                                <c-upload v-model="ruleForm.transportContainerList[index][p.key]" @change="$refs.ruleForm.validateField(p.key)" listType="text" />
                            </div>
                        </el-form-item>
                    </el-col>
                </div>
            </c-form-template>
        </el-form>
        <span slot="footer">
            <el-button :loading="loading" type="primary" @click="handleSubmit">确认上传</el-button>
            <el-button :loading="loading" @click="handleClose">关闭</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    components: {},
    data () {
        return {
            dialogVisible: false,
            loading: false,
            pageLoading: false,
            id: "",
            vins: [],
            ruleForm: {
                transportContainerList: []
            },
            rules: {
                seaBillNo: [
                    { required: true, message: "请输入海运提单号", trigger: "blur" },
                ],
                shipName: [
                    { required: true, message: "请输入航次", trigger: "blur" },
                ],
                exportDate: [
                    { required: true, message: "请选择出口日期", trigger: "blur" },
                ],
                estimateArrivalDate: [
                    { required: true, message: "请选择预计到港日期", trigger: "blur" },
                ],
                oceanBillLadingFile: [
                    { required: true, message: "请上传海运提单", trigger: "blur" },
                ],
                containerFile: [
                    { required: true, message: "请上传箱单", trigger: "blur" },
                ],
                shipNo: [
                    { required: true, message: "请输入航次", trigger: "blur" },
                ],
            },
            containerSizes: [
                {
                    label: "20GP",
                    value: "20Gp"
                }, {
                    label: "40Gp",
                    value: "40Gp"
                }, {
                    label: "40HC/HQ",
                    value: "40HC/HQ"
                }, {
                    label: "45HC/HQ",
                    value: "45HC/HQ"
                },
            ],
            containerList: [],
            containerTemp: [
                {
                    name: "集装箱号",
                    key: "no",
                    type: "input",
                },
                {
                    name: "车架号",
                    key: "vinList",
                    type: "select",
                },
                {
                    name: "集装箱尺寸",
                    key: "size",
                    type: "select",
                },
                {
                    name: "重量（kg）",
                    key: "weight",
                    type: "input",
                },
                {
                    name: "装箱照片",
                    key: "packingPicList",
                    type: "file",
                },
            ]
        };
    },
    created () {
    },

    methods: {
        delItem (index) {
            this.containerList.splice(index, 1)
            this.ruleForm.transportContainerList.splice(index, 1)
        },
        addContainer () {

            this.containerList.push(this.containerTemp)
            this.ruleForm.transportContainerList.push({
                no: "",
                packingPicList: [],
                size: "",
                weight: "",
                vin: []
            })
        },
        handleSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$confirm("是否确认此操作？", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.loading = true;
                        const data = JSON.parse(JSON.stringify(this.ruleForm));
                        this.$post({
                            url: '/sellerCarOutApply/uploadOutInfo',
                            data,
                        }).then(
                            () => {
                                this.$message.success("出口信息上传成功");
                                this.handleClose();
                                this.$parent.$parent.tableList();
                                this.loading = false;
                            },
                            () => {
                                this.loading = false;
                            }
                        );
                    });
                }
            });
        },
        handleOpen (item) {
            this.dialogVisible = true;
            if (item && item.id) {
                let vins = item.vins.split(",")
                this.ruleForm.outApplyId = item.id;
                vins.forEach((i) => {
                    this.vins.push({
                        value: i,
                        label: i
                    })
                })
            }
        },
        handleClose () {
            this.ruleForm.transportContainerList = [];
            this.containerList = [];
            this.vins = [];
            this.$refs.ruleForm.resetFields();
            this.dialogVisible = false;
        },
    },
};
</script>
<style  lang="scss">
.nameBlock .el-input-group__append {
    background-color: #409eff;
    color: #fff;
}
.containerItem {
    padding-top: 12px;
    .title {
        font-size: 14px;
        span {
            float: right;
            color: #f78989;
            cursor: pointer;
        }
    }
    & + .containerItem {
        margin-top: 6px;
        border-top: 1px dotted #cfcfcf;
    }
}
</style>
